<template>
	<view class="record">
		<view class="record-box" v-for="(item,index) in recordList" :key="index">
			<view class="num-prefecture">
				<text>{{item.prefectureNum}}积分抽奖专区：</text>
				<text>将会随机从奖池抽出一件奖品</text>
			</view>
			<view class="num-expend">
				消耗积分：<text style="color: #FF7200;">{{item.expendNum}}</text>积分
			</view>
			<view class="result">
				<view class="result-left">
					<text>抽奖结果：</text><text style="color: #FF7200;">{{item.result}}</text>
				</view>
				<view class="result-right">
					<text>抽奖时间：2021/12/21</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordList:[{prefectureNum:'200',expendNum:'200',result:'已中奖'},{prefectureNum:'200',expendNum:'200',result:'已中奖'},{prefectureNum:'200',expendNum:'200',result:'已中奖'}]
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="less">
	.record {
		padding: 40rpx;
		.record-box {
			width: 100%;
			height: auto;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 20rpx;
			padding: 18rpx 26rpx;
			margin-bottom: 40rpx;
			.result{
				display: flex;
				justify-content: space-between;
				.result-left{
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
				.result-right{
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}
			}
			.num-expend{
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin: 10rpx 0;
			}
			.num-prefecture{
				text:first-child{
					color: #FF7200;
					font-size: 36rpx;
				}
				text:last-child{
					color: #666666;
					font-size: 36rpx;
				}
			}
		}
	}
</style>
